<template>
    <div class="employee-container">
      <div style="background: #faf0e6;opacity: .8;margin-top:-10px;height: 30px">
      <el-row>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '../shouYe' }"style="margin-left: 30px;margin-top: 8px">首页</el-breadcrumb-item>
          <el-breadcrumb-item style="margin-top: 8px"><i class="fa fa-server" aria-hidden="true"></i>基础信息管理</el-breadcrumb-item>
          <el-breadcrumb-item style="margin-top: 8px"><i class="el-icon-s-custom" aria-hidden="true"></i>用户信息</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      </div>
      <el-row>
        <el-form label-width="80px">
          <el-row>
            <el-col :span="8" style="margin-top: 10px">
              <el-form-item label="用户名" label-width="80px">
                <el-input style="max-height:1px"></el-input>
              </el-form-item>
              </el-col>
            <el-col :span="8" style="margin-top: 10px">
              <el-form-item label="用户权限" label-width="80px">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="margin-top: 10px">
              <el-form-item>
                <el-button type="success" style="background-color: cornflowerblue">搜索Search</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <el-row>
        <div>
          <el-button-group>
            <el-button @click="btnAddClick" type="primary" icon="el-icon-edit">添加</el-button>
            <el-button type="warning" icon="el-icon-share">修改</el-button>
            <el-button type="danger" icon="el-icon-delete">删除</el-button>
          </el-button-group>
        </div>
        <el-table :data="tableData"
                   border
                   stripe
                  @row-dblclick="handleDoubleClick"
                   style="width :100%">
          <el-table-column
            prop="name"
            label="用户名"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="datetime"
            label="入驻时间"
            sortable
          >
            <template slot-scope="scope">
              {{new Date(scope.row.datetime).toLocaleDateString()}}

            </template>
          </el-table-column>
          <el-table-column
            prop="permission"
            label="用户权限"
          ></el-table-column>
          <el-table-column
            prop="phoneNumber"
            label="电话号码"
          ></el-table-column>
        <el-table-column
          prop="address"
          label="所处地址"
        ></el-table-column>
        </el-table>

        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>

          <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>

      </el-row>
      <el-dialog
        :title="info.title"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form>
          <el-form-group>
            <el-form-item label-width="80px" label="用户名">
              <el-input v-model="user.name"/>
            </el-form-item>
          </el-form-group>
          <el-form-group>
            <el-form-item label-width="80px" label="入驻时间">
              <!--<el-input v-model="user.datetime"/>-->
              <!--选择器-->
              <div class="block">
                <span class="demonstration"></span>
                <el-date-picker
                  v-model="user.datetime"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
            </el-form-item>
          </el-form-group>
          <el-form-group>
            <el-form-item label-width="80px" label="用户权限">
              <!--<el-input v-model="user.permission">-->
              <!--选择器开始-->
              <el-select v-model="user.permission" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
              <!--选择器结束-->
              <!--</el-input>-->
            </el-form-item>
          </el-form-group>
          <el-form-group>
            <el-form-item label-width="80px" label="电话号码">
              <el-input v-model="user.phoneNumber"/>
            </el-form-item>
          </el-form-group>
          <el-form-group>
              <el-form-item label-width="80px" label="所处地址">
                <el-input v-model="user.address"/>
              </el-form-item>
            </el-form-group>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button @click="sumbmitHandle" type="primary" >确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "user", data(){
          /*return{
            tableData:[],
            dialogVisible:false,
            user:{
              name:''
            }*/





            return{
              pickerOptions: {
                disabledDate(time) {
                  return time.getTime() > Date.now();
                },
                value1: '',
                value2: ''
              },
              //选项
              options: [{
                value: '选项1',
                label: '系统管理'
              }, {
                value: '选项2',
                label: '普通管理'
              }],
              value:'',

              tableData:[],
              gridData:[],
              info:{
                title:'员工添加'
              },
              dialogVisible: false,
              dialogFormVisible: false,
              formLabelWidth: '120px',
              user:{
                id:-1,
                name:'',
                datetime:'',
                permission:'',
                phoneNumber:'',
                address:''
              }
            }
      },mounted() {
          /*挂载结束之后*/
        var _this=this;
        this.axios({
          url:'http://localhost:3000/user/list',
          method:'get'
        }).then(function (res) {
          _this.tableData=res.data;
        })
      },methods:{
        btnAddClick(){
          this.info.title='员工添加';
          this.user.id = -1;
          this.dialogVisible = true;
          },
          handleClose(){
            this.dialogVisible = false;
          },sumbmitHandle(){
            var _this = this;
            this.axios({
              url:'http://127.0.0.1:3000/user/add',
              method:'get',
              params:{
                id:this.user.id,
                name:this.user.name,
                datetime:this.user.datetime,
                permission:this.user.permission,
                phoneNumber:this.user.phoneNumber,
                address:this.user.address
              }
            }).then(function (res) {
              if (res.data.flag){
                _this.tableData = res.data.emps;
                _this.$message('操作成功')
                _this.dialogVisible = false;
              } else {
                alert('操作失败');
              }
            })
        },handleDoubleClick(row){
          //alert(row.id);
          this.user =row;
          this.info.title='用户修改';
          this.dialogVisible =true;
        }

      }
    }
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
